<template>
  <div id="app">




    <login v-show="!isLogin"></login>
    <div class="banner" v-show="isLogin">
      <el-row type="flex" justify="end">
        <el-col :span="2" style="height: 580px">
          <div class="map">
            <el-menu default-active="1-4" class="el-menu-vertical-demo"  background-color="#F6FFFF" @open="handleOpen">
              <el-menu-item index="999" @click="select('/index','首页')">
                <i class="el-icon-menu"></i>
                首页
              </el-menu-item>
              <el-menu-item index="1" @click="select('/warehouse','仓库')">
                <i class="el-icon-menu"></i>
                <span slot="title">仓库</span>
              </el-menu-item>
              <el-menu-item index="8989" @click="select('/goods','商品')">
                <i class="el-icon-menu"></i>
                <span slot="title">商品</span>
              </el-menu-item>
              <el-menu-item index="4">
                <i class="el-icon-setting"></i>
                <span slot="title">导航四</span>
              </el-menu-item>
              <el-menu-item index="4">
                <i class="el-icon-setting"></i>
                <span slot="title">导航四</span>
              </el-menu-item>
              <el-menu-item index="4">
                <i class="el-icon-setting"></i>
                <span slot="title">导航四</span>
              </el-menu-item>
              <el-menu-item index="4">
                <i class="el-icon-setting"></i>
                <span slot="title">导航四</span>
              </el-menu-item>
              <el-menu-item index="4">
                <i class="el-icon-setting"></i>
                <span slot="title">导航四</span>
              </el-menu-item>
              <el-menu-item index="4">
                <i class="el-icon-setting"></i>
                <span slot="title">导航四</span>
              </el-menu-item>
              <el-menu-item index="4">
                <i class="el-icon-setting"></i>
                <span slot="title">导航四</span>
              </el-menu-item>
              <el-menu-item index="4">
                <i class="el-icon-setting"></i>
                <span slot="title">导航四</span>
              </el-menu-item>
            </el-menu>
          </div>
        </el-col>

        <el-col :span="22">
          <div class="header">
            <el-row type="flex">
              <el-col :span="10">
                <span style="margin-left: 15px" class="fontHeader">欢迎使用智能仓库作业系统</span>
              </el-col>
              <el-col :span="5" :offset="15">
                <div class="icons">
                  <i class="el-icon-search icon minIcon" ></i>
                  <i class="el-icon-bell icon minIcon"></i>
                  <div class="demo-type icon avatr">
                    <div>
                      <el-avatar icon="el-icon-user-solid"></el-avatar>
                    </div>
                  </div>

                </div>
              </el-col>
              <el-col :span="1">
                <span style="margin-right: 10px" class="fontHeader">SuperAdmin</span>
              </el-col>
            </el-row>
          </div>
          <div style="padding-left: 15px">
            <el-tabs  :closable="true" :addable="true" @tab-remove="removeTab">
              <el-tab-pane v-for=" item in tables"
                           :key="item.name"
                           :label="item.label"
                           :name="item.name"
              ></el-tab-pane>
            </el-tabs>
          </div>


          <!--        内容展示区域-->
          <div class="content">
            <router-view></router-view>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>

</template>

<script>

import login from "@/components/user/login";
import inputAreaModel from "@/components/model/inputAreaModel";
export default {
  name: 'App',
  components: {
    login,
    inputAreaModel
  },
  data() {
    return {
      active:"first",
      tabsIndex:0,
      tables:[
        {
          label:"test",
          name:'first'
        },
        {
          label:'test02',
          name:'second'
        }
      ],
      isLogin:false
    }
  },
  mounted() {
    this.$bus.$on("isLogin",()=>{
      this.isLogin=true;
    })
  },
  methods: {
    select(path,name){
      //判断是否重复添加
      for (let i = 0; i < this.tables.length; i++) {
        if (this.tables[i].label==name){
          //监测到重复项
          return false;
        }
      }
      let menu={
        label:name,
        name:this.tabsIndex++
      }
      //添加一个导航项
      // this.tables.splice(this.tables,length,0,menu)
      this.tables.push(menu)

      //跳转页面
      if (path!=null&&path!=undefined)
      this.$router.push(path)
    },
    //移除tables标签页
    removeTab(targetName){
      this.tabsIndex--;
      //移除标签
      for (let i = 0; i < this.tables.length; i++) {
        if (this.tables[i].name = targetName) {
          this.tables.splice(i,1);
        }
      }
    },
    //打开导航菜单
    handleOpen(index){
      alert(index)
    }


  }
}
</script>
<style lang="scss">
.header{
  width: 100%;
  height: 45px;
  background-color: white;
  border-bottom: 1px solid rgba(0,0,0,.4);
  line-height: 45px;
  color: rgba(0,0,0,.8);

}
.fontHeader{
  color: rgba(0,0,0,.4);
}
.headerBottom{
  width: 100%;
  background-color: white;
  height: 60px;
  box-shadow: 0 2px 0px 0 rgba(0, 0, 0, 0.1)

}
.content{
  width: 98%;
  height: 100%;

  margin: 0px auto;


}
.icons{
  clear: both;
}
.avatr{
  width: 50%;
  height: 50%;
}
.minIcon{

  /*width: 100%;*/
  height: 100%;
  line-height: 45px;
  padding-top: 10px;
}
.map{
  height: 200px;
}
.icon{
  float: left;
  margin: 0px 6px;
}
.el-menu {
  border: 0 !important;
}
body{
  background-color: whitesmoke;
  background-color: white;
}
.wrap{
  position: relative;
}



</style>
